<script setup>
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'
import { getGoodsAPI } from '@/api/detail.js'
import CartIcon from '@/views/component/cartIcon.vue'
import { useMouseInElement } from '@vueuse/core'
import { useElementSize } from '@vueuse/core'
import { pcaTextArr } from 'element-china-area-data'
import SKU from '@/views/component/SKU.vue'
import { useCartStore } from '@/stores/cart'
const route = useRoute()
const cartStore = useCartStore()
//搜索框
const searchValue = ref('')
const handleSearch = () => {
  alert('搜索中！')
}

//获取商品信息
const id = route.params.id
const goods = ref()
const getGoods = async () => {
  const res = await getGoodsAPI(id)
  goods.value = res.data.result
}
getGoods()
//收藏商品
const handleHeart = () => {
  goods.value.isCollect = !goods.value.isCollect
  console.log(goods.value.isCollect)
}
//当前点击的图片
const activeImg = ref(0)
const changeSmall = (index) => {
  activeImg.value = index
}
//获得鼠标的距离图片的位置
const target = ref(null)
const { width, height } = useElementSize(target)
const { elementX, elementY, isOutside } = useMouseInElement(target)
const nowX = ref(0)
const nowY = ref(0)
watch([elementX, elementY, isOutside], () => {
  if (elementX.value < 100) {
    nowX.value = 0
  }
  if (elementX.value > width.value - 100) {
    nowX.value = width.value - 200
  }
  if (elementX.value >= 100 && elementX.value <= width.value - 100) {
    nowX.value = elementX.value - 100
  }
  if (elementY.value < 100) {
    nowY.value = 0
  }
  if (elementY.value > height.value - 100) {
    nowY.value = height.value - 200
  }
  if (elementY.value >= 100 && elementY.value <= height.value - 100) {
    nowY.value = elementY.value - 100
  }
})
//选择的数量
const num = ref(1)
//加入购物车
const handleCart = () => {
  //加入购物车操作
  goods.value.count = num.value
  goods.value.selected = 'true'
  console.log(goods.value)
  cartStore.addCart(goods.value)
}
//切换商品详情和商品评价
const value = ref('全部|默认排序')
const options = ['全部|默认排序', '按时间排序']
const isEvaluation = ref(false)
const handleEvaluation = () => {
  isEvaluation.value = !isEvaluation.value
}
//选择的地址
const selectedOptions = ref()
//加入购物车时的商品参数
</script>
<template>
  <div class="detail" style="background-color: #e4dfd7">
    <!-- 右边导航部分 -->
    <el-affix>
      <div class="rightNav">
        <div class="rightAll">
          <div @click="$router.push('/my')">
            <el-link
              :underline="false"
              style="writing-mode: tb-rl; color: white; margin-left: 20px"
            >
              <el-icon :size="30" color="white"><User /></el-icon>
              个人中心</el-link
            >
          </div>
          <div @dblclick="$router.push('/cart')">
            <el-link
              :underline="false"
              style="writing-mode: tb-rl; color: white; margin-left: 5px"
            >
              <CartIcon
                style="
                  position: static;
                  font-size: 30px;
                  transform: translateX(-30%);
                "
              />
              <span>购物车</span>
            </el-link>
          </div>
          <el-link
            class="CartTop"
            href="#"
            style="color: black"
            :underline="false"
            icon="CaretTop"
          />
        </div>
      </div>
    </el-affix>

    <!-- nav部分 -->
    <div class="nav">
      <el-image src="/assets/LOGO.png" class="navImg" />
      <p>商品详情</p>
      <!-- 搜索框 -->
      <el-input
        prefix-icon="Search"
        class="el_search"
        v-model="searchValue"
        placeholder="搜一搜"
        @keyup.enter="handleSearch"
      ></el-input>

      <!-- 购物车 -->
      <div class="carts">
        <CartIcon />
      </div>
    </div>
    <!-- 内容部分 -->
    <div
      class="main"
      style="background-color: white; width: 90%; margin: 0 auto"
    >
      <!-- 返回首页 -->
      <el-page-header @back="$router.push('/')" title="返回首页">
        <template #content>
          <span> 商品详情 </span>
        </template>
      </el-page-header>

      <!-- 商品信息 -->
      <!-- 左边部分 -->
      <el-row>
        <el-col :span="8" style="margin-left: 20px">
          <div class="mainImg">
            <!-- 大图 -->
            <div class="big">
              <el-image
                ref="target"
                :src="goods?.mainPictures[activeImg]"
                class="bigImg"
              ></el-image>
            </div>
            <!-- 放大镜 -->
            <div
              class="middle"
              v-if="!isOutside"
              :style="{ left: `${nowX}` + 'px', top: `${nowY}` + 'px' }"
            ></div>
            <div class="middleBox" v-show="!isOutside">
              <el-image
                class="middleImg"
                :src="goods?.mainPictures[activeImg]"
                :style="{
                  left: -2 * `${nowX}` + 'px',
                  top: -2 * `${nowY}` + 'px'
                }"
              ></el-image>
            </div>
            <!-- 小图 -->
            <div class="small">
              <el-image
                @click="changeSmall(index)"
                class="smallImg"
                :class="{ activeSmall: index === activeImg }"
                :src="goods?.mainPictures[index]"
                v-for="(item, index) in goods?.mainPictures"
                :key="index"
              ></el-image>
            </div>
          </div>
          <div style="font-family: '清松'">
            <p>
              商品ID：{{ goods?.id
              }}<span style="margin-left: 30%"
                >收藏商品<a
                  href="javascript:;"
                  style="color: black"
                  @click="handleHeart"
                >
                  <el-icon v-if="goods?.isCollect" color="pink"
                    ><StarFilled /></el-icon
                  ><el-icon v-else><Star /></el-icon> </a
              ></span>
            </p>
          </div>
          <div style="display: flex; justify-content: space-around">
            <div style="text-align: center">
              <p>销量人气</p>
              <p style="color: red">{{ goods?.salesCount }}</p>
            </div>
            <div style="text-align: center">
              <p>商品评价</p>
              <p style="color: red">{{ goods?.commentCount }}</p>
            </div>
            <div style="text-align: center">
              <p>收藏数量</p>
              <p style="color: red">{{ goods?.collectCount }}</p>
            </div>
          </div></el-col
        >
        <!-- 右边部分 -->
        <el-col :span="13" :offset="1">
          <h1 style="font-family: '素材集市'">{{ goods?.name }}</h1>
          <p style="font-family: '清松'">{{ goods?.desc }}</p>
          <p style="font-family: '清松'; color: #5e7987">
            <el-icon color="black" style="vertical-align: middle"
              ><Shop /></el-icon
            >品牌：{{ goods?.brand?.name }}
          </p>
          <div class="price">
            <p>
              <span style="font-size: 45px; color: #eef7f2"
                >￥{{ goods?.price }}</span
              >
            </p>
            <p>
              <span
                style="
                  font-size: 30px;
                  color: #eef7f2;
                  text-decoration: line-through;
                "
                >￥{{ goods?.oldPrice }}</span
              >
            </p>
          </div>
          <div>
            <span class="rightLong">配送</span>
            <el-cascader
              size="large"
              :options="pcaTextArr"
              v-model="selectedOptions"
            >
            </el-cascader>
          </div>
          <p>
            <span class="rightLong">运费</span>
            新会员专享首单满38元免邮（限唯品自营商品，部分商品不可用）
          </p>
          <div>
            <SKU v-model:good="goods" />
          </div>
          <div>
            <span class="rightLong">数量</span>
            <el-input-number v-model="num" :min="1" @change="handleChange" />
          </div>
          <div style="text-align: center; margin-top: 50px">
            <el-button
              color="#f1908c"
              style="color: #eef7f2; width: 300px"
              size="large"
              @click="handleCart"
              >加入购物车</el-button
            >
          </div>
        </el-col>
      </el-row>
      <!--商品详情部分 -->
      <el-row>
        <el-col :offset="1">
          <div class="floor">
            <el-tabs type="card">
              <el-tab-pane label="商品详情" style="text-align: center">
                <div>
                  <p style="font-family: 加油鸭">商品参数</p>
                  <div
                    class="canshu"
                    style="
                      display: flex;
                      flex-wrap: wrap;
                      justify-content: space-between;
                      background-color: #f8ebe6;
                    "
                  >
                    <p><span>适用年龄</span><span>全年龄</span></p>
                    <p><span>适用季节</span><span>春秋</span></p>
                    <p><span>适用场景</span><span>日常生活</span></p>
                    <p><span>质量等级</span><span>合格品</span></p>
                  </div>
                </div>
                <div>
                  <p style="font-family: 加油鸭">商品展示</p>
                  <el-image
                    :src="item"
                    v-for="item in goods?.details.pictures"
                    :key="item"
                  />
                </div>
              </el-tab-pane>
              <el-tab-pane label="全部评价"
                ><div
                  style="
                    background-color: #eae8eb;
                    font-size: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <p style="font-family: 加油鸭">全部评价</p>
                </div>
                <!-- 评价索引部分 -->
                <el-row style="background-color: #fafafa; font-family: 清松">
                  <el-col
                    :span="8"
                    style="border-right: 2px solid pink; text-align: center"
                  >
                    <p style="font-size: 50px; color: #f19790; margin: 0px">
                      {{ goods?.evaluationInfo?.praisePercent * 100 || 100 }}%
                    </p>
                    的用户对该商品很满意
                  </el-col>
                  <el-col :span="15" :offset="1">
                    <div class="custom-style">
                      <el-segmented v-model="value" :options="options" />
                    </div>
                  </el-col>
                </el-row>
                <!-- 暂无评价 -->
                <div v-if="!goods?.evaluationInfo">
                  <el-empty description="暂无评价" />
                </div>
                <!-- 具体评价 -->
                <div v-else v-for="item in 3" :key="item">
                  <el-row class="evaluation">
                    <el-col
                      :span="6"
                      style="
                        display: flex;
                        justify-content: center;
                        align-items: center;
                      "
                    >
                      <img
                        style="width: 50px; height: 50px"
                        src="/assets/默认头像.png"
                        alt="加载失败"
                      />
                      <p style="margin-left: 5%">XX会员</p>
                    </el-col>
                    <el-col :span="15" :offset="3">
                      <p>
                        {{ goods?.evaluationInfo.createTime }}
                      </p>
                      <div
                        style="
                          display: flex;
                          align-items: center;
                          font-size: 20px;
                        "
                      >
                        <p style="flex: 4">
                          {{ goods?.evaluationInfo.content }}
                        </p>
                        <div style="color: #f09c5a; flex: 1">
                          点赞数：{{ goods?.evaluationInfo.praiseCount }}
                          <a
                            href="javascript:;"
                            style="color: black"
                            @click="handleEvaluation"
                          >
                            <el-icon v-if="isEvaluation" color="#f09c5a"
                              ><StarFilled /></el-icon
                            ><el-icon v-else><Star /></el-icon>
                          </a>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-tab-pane>
            </el-tabs></div
        ></el-col>
      </el-row>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.CartTop {
  width: 100%;
  font-size: 30px;
  position: absolute;
  bottom: 10%;
}
.evaluation {
  padding-right: 50px;
  font-family: 小可奶酪体;
}
.custom-style {
  :deep(.el-segmented) {
    --el-segmented-item-selected-color: var(--el-text-color-primary);
    --el-segmented-item-selected-bg-color: #f8b37f;
    --el-border-radius-base: 16px;
  }
}
.canshu {
  width: 90%;
  p {
    width: 50%;
    display: flex;
    justify-content: space-around;
  }
}
.rightLong {
  margin-right: 20px;
}
.price {
  background-color: #f1908c;
  padding-left: 30px;
}
.mainImg {
  position: relative;
  margin-right: 10%;
  .middleBox {
    overflow: hidden;
    width: 400px;
    height: 400px;
    position: absolute;
    z-index: 999;
    top: 0;
    transform: translateX(100%);
    .middleImg {
      width: 800px;
      height: 800px;
      position: absolute;
    }
  }
  .bigImg {
    width: 400px;
    height: 400px;
  }

  .middle {
    position: absolute;
    background-color: rgba($color: #000000, $alpha: 0.3);
    width: 200px;
    height: 200px;
  }
  .activeSmall {
    border: 4px solid #fbb957;
  }
  .small {
    display: flex;
    justify-content: space-between;
    .smallImg {
      margin: 5px;
    }
  }
}
.carts {
  position: absolute;
  right: 7%;
  top: 1.5%;
}
.rightNav {
  position: absolute;
  right: 0;
  background-color: #393733;
  width: 5%;
  height: 100vh;
  .rightAll {
    margin-top: 300%;
    height: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    div {
      width: 100%;
    }
  }
}
.nav {
  overflow: hidden;
  background-color: #f9f4dc;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  .navImg {
    position: absolute;
    left: 0;
    height: 100px;
    width: 150px;
  }
  p {
    font-family: 'yufan';
    font-size: 20px;
  }
  .el_search {
    width: 160px;
    position: absolute;
    right: 10%;
    :deep(.el-input__inner) {
      font-family: '加油鸭';
    }
  }
}
</style>
